<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>
<title>月结库存</title>
<%-- <jsp:include page="../../head.jsp"/> --%>
<link rel="stylesheet" href="${contextPath}/static/ace/components/_mod/jquery-ui/jquery-ui.css"/>
<link rel="stylesheet" href="${contextPath}/static/ace/components/_mod/jqgrid/ui.jqgrid.css"/>
<link rel="stylesheet" href="${contextPath}/static/bootstrap/css/bootstrap-select.css" />
<link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap-datetimepicker.min.css" />
<script src="${contextPath}/static/bootstrap/js/bootstrap-select.min.js"></script>
<script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.min.js"></script>
<script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.fr.js"></script>
<script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.zh-CN.js"></script>
<script src=${contextPath}/static/layer/layui.all.js></script>
<script src="${contextPath}/static/util/dateutils.js"></script>
<style type="text/css">
    .customBtn {
        line-height: 20px;
        margin-bottom: 3px;
    }

    .btnLine {
        margin-left: 1px;
        margin-top: 8px;
        margin-bottom: 2px;
    }

    @-webkit-keyframes bouncedelay {
        0%, 80%, 100% {
            -webkit-transform: scale(0.0)
        }
        40% {
            -webkit-transform: scale(1.0)
        }
    }

    @keyframes bouncedelay {
        0%, 80%, 100% {
            transform: scale(0.0);
            -webkit-transform: scale(0.0);
        }
        40% {
            transform: scale(1.0);
            -webkit-transform: scale(1.0);
        }
    }

    .autocomplete-suggestions {
        border: 1px solid #999;
        background: #FFF;
        overflow: auto;
    }

    .autocomplete-suggestion {
        padding: 2px 5px;
        white-space: nowrap;
        overflow: hidden;
    }

    .autocomplete-selected {
        background: #F0F0F0;
    }

    .autocomplete-suggestions strong {
        font-weight: normal;
        color: #3399FF;
    }
	
    @-moz-document url-prefix() {
        fieldset {
            display: table-cell;
        }
    }

    .ui-jqgrid .ui-priority-secondary{
        background: #d5effc;
    }
    .bootstrap-select > .btn{
		color:#ABBAC3 !important;
		background-color: #fff !important;
		text-shadow:none;
		border-width:1px;
	}
	.bootstrap-select > .btn:hover, .bootstrap-select > .btn:focus:hover, .bootstrap-select > .btn.focus:hover, .bootstrap-select > .btn:active:hover, .bootstrap-select > .btn:focus:active, .btn-default:focus:active, .open > .btn.dropdown-toggle, .open > .btn-default.dropdown-toggle, .open > .btn.dropdown-toggle:hover, .open > .btn-default.dropdown-toggle:hover, .open > .btn.dropdown-toggle:focus, .open > .btn-default.dropdown-toggle:focus, .open > .btn.dropdown-toggle.focus, .open > .btn-default.dropdown-toggle.focus, .open > .btn.dropdown-toggle:active, .open > .btn-default.dropdown-toggle:active {
	    background-color: #fff !important;
	    border-color: #ABBAC3;
	}
	.layui-form-select{display:none};
    .ui-jqgrid .ui-jqgrid-title{font-size:12px;}    /*修改grid标题的字体大小*/

    .ui-jqgrid-sortable {font-size:12px;}   /*修改列名的字体大小*/

    .ui-jqgrid tr.jqgrow td {font-size:12px; font-family:"宋体"} /*修改表格内容字体*/

    /*****  表头样式  ******/
    /*.ui-jqgrid .ui-jqgrid-titlebar{*/
    /*background-color: #878787;*/
    /*height: 36px;*/
    /*}*/
    /*****  标题样式  ******/
    .ui-jqgrid-sortable {
        text-align: center;
    }

    #cb_grid-coupontype-table{
        margin-left: 9px;
    }
    #grid-coupontype-table_rn {
        width: 36px;
    }

    #myModal .modal-body table tr{
        height: 30px;
    }
    #myModal .modal-body table input[type='text']{
        height: 22px;
    }
    #myModal .modal-body table select {
        height: 22px;
    }

    .popover-content{
        color: red;
    }

    #cb_grid-stock-table{
        margin-left: 10px;
    }
    #cb_list2{
        margin-left: 10px;
    }

    label{
        font-size: 13px;
    }
	.unabled{
		color:grey;
	}
	.btn-default>.blue{
		color:grey !important;
	}
	.ui-jqgrid tr.footrow-ltr td {text-align:center}
</style>
<div class="row" id="app">
    <div class="row btnLine">
        <div class="button-len col-sm-12">
            <form class="form-inline layui-form ">
            	<input id="year" type="hidden" />
            	<input id="month" type="hidden" />
				<div class="form-group">
                    <input type="text" class="form-control" id="turnCreateDate" name="turnCreateDate" placeholder="查询开始时间" readonly />
                </div>
                <div class="form-group">
					<input type="text" class="form-control" id="bindCreateDate" name="bindCreateDate" placeholder="查询结束时间" readonly />
                </div>
           	 	<div class="form-group">
                     <select class="selectpicker" data-live-search="true" title="请选择店铺名称" data-live-search-placeholder="搜索" data-actions-box="true" id="shopId">
					</select>
					<input type="hidden" name="shopId" id="shopid" />
					<input type="hidden" name="shopName" id="shopName" />
                </div>
                <div class="form-group">
                    <button type="button" id="gridSave" class="btn btn-white btn-success btn-sm customBtn" >
                        <i class="ace-icon fa fa-plus blue"> 月结</i>
                    </button>
                </div>
                <div class="form-group">
                    <button type="button" id="griddel" class="btn btn-white btn-warning btn-sm customBtn" >
                        <i class="ace-icon fa fa-minus red"> 反月结</i>
                    </button>
                </div>
				<div class="form-group">
					<div id="psearch" class="btn btn-sm btn-white btn-info search-len customBtn">
                        <i class="ace-icon fa fa-search orange"></i>查询
                    </div>
				</div>
            </form>
        </div>
    </div>
    <br/>
    <!-- 内容数据开始 -->
    <div class="col-xs-12">
        <table id="grid-stock-table"></table>

        <div id="grid-stock-pager"></div>

    </div>
    <!-- 内容数据结束 -->

</div>
<script type="text/javascript">
var grid_stock_selector = "#grid-stock-table";
var scripts = [null, "${contextPath}/static/ace/components/bootstrap-datepicker/dist/js/bootstrap-datepicker.js", "${contextPath}/static/ace/components/jqGrid/js/jquery.jqGrid.js", "${contextPath}/static/ace/components/jqGrid/js/i18n/grid.locale-cn.js", "${contextPath}/static/layer/layer.js","${contextPath}/static/ztree/js/jquery.ztree.core-3.5.js", "${contextPath}/static/ztree/js/jquery.ztree.excheck-3.5.js", null]
function getShop(){
	$.ajax({
        url: '${contextPath}/ktcount/getShops', //localhost:8080
        data:{"zoneCode":"","shopType":"\'中深\'"},
        type: 'post',
        success: function (data) {
           	var data = data.data;
			var html = '';
        	for(var i = 0;i < data.length;i++){
        		html +='<option value="'+data[i]["shopId"]+'">'+data[i]["shopName"]+'</option>';
        	}
        	$("#shopId").html(html);
        	$('#shopId').selectpicker('refresh');
        	if(!("" == data || null == data)){
        		$("#shopId").selectpicker('val',data[0]["shopId"]);
        	}
        	getSmonSettli();
        },
        error: function (error) {
            alert(error)
        }
    })
}
var getSmonSettli = function (shopId) {
    var filters = {};
    filters.limit = 10000;
    filters.offset = 0;
    filters.shopId=$("#shopId").val()||-1;
    $('.page-content-area').ace_ajax('loadScripts', scripts, function () {
        jQuery(function ($) {
            jQuery(grid_stock_selector).jqGrid({
                url: "${contextPath}/ktTakeStock/getSmonSettli",
                datatype: "json",
                postData: filters,
                mtype: 'POST',
                height: 500,
                colNames : ['ID','年','月','开始日期', '结束日期', '操作时间', '操作人'],
                colModel : [
                    {
                        name: 'id',
                        index: 'id',
                        hidden: true
                    },
                    {
                        name: 'year',
                        index: 's.YEAR',
                    },
                    {
                        name: 'month',
                        index: 's.MONTH'
                    },{
                        name: 'turncreatedate',
                        index: 's.TURNCREATEDATE'
                    },
                    {
                        name: 'bindcreatedate',
                        index: 's.BINDCREATEDATE',
                    },
                    {
                        name: 'operatorTime',
                        index: 's.OPERATOR_TIME'
                    },
                    {
                        name: 'username',
                        index: 'u.USERNAME'
                    }
                ],
                sortname: 'OPERATOR_TIME', //设置默认的排序列
                sortorder: 'asc',
                rownumbers: true, //自动行数
                autowidth:true,  //宽度自适应
                viewrecords: true,
                rowNum : 1000000,//一页显示多少条
                caption: "月结库存"
            });
			$("#gridSave").bind('click',function(){
				saveData();
			});
			$("#griddel").bind('click',function(){
				delData();
			})
			$("#psearch").bind('click',function(){
				var filters = {};
                 filters.limit = 10000;
                 filters.offset = 0;
                 filters.shopId=$("#shopId").val()||-1;
                 jQuery(grid_stock_selector).jqGrid('setGridParam', {
                     postData: filters
                 }).trigger("reloadGrid");
			} )
            $(window).triggerHandler('resize.jqGrid');//trigger window resize to make the grid get the correct size

            $("#jqgh_grid-coupontype-table_rn").html('');
            $("#grid-coupontype-table_rn").css('width', '36px');
        });
    });
}
	var delData = function(){
		var rowData = $(grid_stock_selector).jqGrid('getRowData');	
		if(rowData.length == 0)
			return;
		$.ajax({
            url: '${contextPath}/ktTakeStock/delSmonSettli',
            type: 'post',
            data: rowData[0],
            success: function (data) {
                layer.msg('提示：反月结成功',{icon:0});
    			$(grid_stock_selector).trigger("reloadGrid")
    			$("#gridDel").removeClass("btn-default").addClass("btn-success");
            },
            error: function (error) {
                layer.closeAll('loading');
                $("#gridDel").removeClass("btn-default").addClass("btn-success");
            }
        })
	}
	var saveData = function(){
	   $("#gridSave").removeClass("btn-success").addClass("btn-default");
	   var params ={};
	   params["year"] = $("#year").val();
	   params["month"] = $("#month").val();
	   params["shopId"] = $("#shopId").val();
	   params["turnCreateDate"] = $("#turnCreateDate").val();
	   params["bindCreateDate"] = $("#bindCreateDate").val();
       $.ajax({
            url: '${contextPath}/ktTakeStock/saveSmonSettli',
            type: 'post',
            data: params,
            success: function (data) {
                layer.msg('提示：保存成功',{icon:0});
    			$(grid_stock_selector).trigger("reloadGrid")
    			$("#gridSave").removeClass("btn-default").addClass("btn-success");
            },
            error: function (error) {
                layer.closeAll('loading');
                $("#gridSave").removeClass("btn-default").addClass("btn-success");
            }
        })
}
function initDatetimepicker(arr) {
	var oDateUtil = new DateUtil();
	arr.forEach(function(item, index, input) {
		$('#' + item).datetimepicker({
			language : 'zh-CN',
			weekStart : 1,
			todayBtn : 1,
			todayHighlight : 1,
			startView : 3,
			forceParse : 0,
			showMeridian : 1,
			format : "yyyy-mm-dd",
			autoclose : true,
			minView : "month",
			initialDate:trans2FormatDate(new Date())
		}).on('changeDate', function(ev){
		    var idVal = $(this).attr("id");
		    var date = ev.date;
		    if(idVal == "turnCreateDate"){
		    	$("#turnCreateDate").val(date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate())
		    }else{
		    	$("#year").val(oDateUtil.formatDate(date,"yyyy",false));
		    	$("#month").val(oDateUtil.formatDate(date,"MM",false));
		    	$("#bindCreateDate").val(date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate())
		    }
		});
		//$('#' + item).datetimepicker('setEndDate', trans2FormatDate(new Date()));
	})
	$('#turnCreateDate').val(trans2FormatDate(new Date(),false));
	$('#bindCreateDate').val(trans2FormatDate(new Date(),false));
	$("#year").val(oDateUtil.formatDate(new Date(),"yyyy",false));
	$("#month").val(oDateUtil.formatDate(new Date(),"MM",false));
}
function trans2FormatDate(date,isMonth){
	//date.setDate(date.getDate() - 1);
	isMonth && date.setMonth(date.getMonth()-1);
	return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()
}
$(function(){
	getShop();
	initDatetimepicker([ "turnCreateDate", "bindCreateDate" ])
})
</script>